<template>
  <div style="margin-top: 5px;">
    <titleBox text="便民生活"></titleBox>
    <div class="content">
      <mTable :titleData="titleData" :valueData="valueData"></mTable>
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  import titleBox from "../mConponents/titleBox.vue"
  import mTable from "../mConponents/mTable.vue"
  const titleData = [
    {
      name: "名称",
      key: "mc",
      align: true,
      style: {
        flex: 1,
        textAlign: "left"
      }
    },
    {
      name: "分类",
      key: "fl",
      style: {
        width: "60px"
      }
    },
    {
      name: "服务内容",
      key: "fwnr",
      align: true,
      style: {
        width: "120px"
      }
    }
 ]
  const valueData = [
    {
      mc: "好孩子集团公司",
      fl: "儿童",
      fwnr: "提供孩子游玩场地和设施。"
    },
    {
      mc: "天享养老服务有限公司",
      fl: "养老",
      fwnr: "提供老年人心里健康咨询平台。"
    },
    {
      mc: "迈瑞医疗国际股份有限公司",
      fl: "医疗",
      fwnr: "提供基本医疗设施，和常驻医生。"
    },
    {
      mc: "天鹅家政服务有限公司",
      fl: "家政",
      fwnr: "提供室内清洁，老人陪护，管道疏通服务。"
    }

  ]

</script>
<style scoped lang="less">
  .content {
    padding:10px;
    background-color: #001a1dcc;
    width: 330px;
    margin-top: 5px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .top{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;

      .top_item{
        flex:1;
        padding:3px 10px 3px 3px;
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
        border: 1px solid;
        border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);
        .top_item_name{
          font-size: 10px;
          color: rgba(213, 242, 255, 1);
          flex:1;
        }
        .top_item_num{
          color: rgba(158, 247, 255, 1);
          font-weight: bold;
          font-size: 12px;
        }
        .top_item_leftIcon{
          background-image: url('/img/myimg/lefticon1.png');
          background-size: 17px 15px;
          width: 17px;
          height: 15px;
        }
      }
    }
}
</style>
